<!DOCTYPE html >
<html lang="en" onselectstart="return false;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000;
        }
        #box{
            width:133px;
            height: 200px;
            margin: 100px auto;
            position:relative;
            /* border: 1px solid #fff; 测试用到*/
            transform-style: preserve-3d;
            /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
            /*perspective:800px;*/
            /*3.设置透视距离*/
            transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;             }
        #box img{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 3px;
            box-shadow: 0px 0px 5px #fff;
            /*4.设置图片阴影*/
            -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
            /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
            /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
        }

    </style>
</head>
<body>
<div id="box">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3134781085,1516570414&fm=11&gp=0.jpg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110083&di=58be4e102fb5282138d2562d82a1fe32&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161024%2F1ac77cb95e7d4a2585d7fea91f0fabcd_th.jpeg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110083&di=4371f78d3fd4a0408afb2fe819ac6212&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110082&di=8c551d7d2ce3ef842991e80426f2bbf6&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F37d3d539b6003af36cacef3e352ac65c1038b65d.jpg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110082&di=5fca9322b1f1e6bbea6df14cfb03b6c4&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190512%2Fda12301f8654442a88a9864bba087701.jpeg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110082&di=5809d7ccd39622962dd4090c70d2da3f&imgtype=0&src=http%3A%2F%2Fwww.2qqtouxiang.com%2Fpic%2FTP4849_01.jpg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110082&di=61360fce749a5abe9f8feb8bc456c296&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201210%2F19%2F20121019132528_EBQYG.jpeg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110081&di=7a98b3655faccfc7f4ffdba5ac6bdec6&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb7003af33a87e9500080e13912385343faf2b4cb.jpg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110080&di=307067f7661e6967814fc7eb1b61a9e3&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190512%2F4afc2ddf32a94396b7ec8460b3b5b3e5.jpeg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110080&di=e9a9b394df59e6d292409175407f9313&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F932ca9934baf734b3160fc76bc761dcf.jpeg" >
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2898067524,3570534490&fm=26&gp=0.jpg" >
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604900110079&di=dad4cc078330043015ffd7f527a3e7cc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202009%2F13%2F20200913151415_kYTkT.thumb.400_0.jpeg" >
</div>

<script>
    // //js动态添加11个img标签
    // //创建11个img标签的办法
    // var box=document.getElementById('box');
    // for(var i=1;i<=11;i++){//有多少张图就循环多少次
    // var imgs= document.createElement('img');
    // imgs.setAttribute("src", "img/"+i+".jpg");
    // box.appendChild(imgs);}
    //当页面加载完毕后再执行代码
    window.onload=function ( ) {
        //1.获取元素
        var oWrap=document.getElementById('box');
        var oImg=oWrap.children;
        // var oImgLen=oImg.length;
        var deg=360/oImg.length;//3.每个需要旋转的度数
        // 定义一个开始的度数
        var roX=-10;
        var roY=0;
        var x,y,x_,y_,xN,yN,time=null;
        //2.遍历所有的img标签
        for(var i=0;i<oImg.length;i++){
            // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
            oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
            oImg[i].style.transition =' all 1s '+ (oImg.length-i-1)*0.1 +'s';
            //transition:设置过渡
            oImg[i].ondragstart=function ( ) {
                return false;
            }
        }
        //3.事件处理
        document.onmousedown=function ( e ) {
            clearInterval(time);
            e=e||window.event;
            x_=e.clientX;
            y_=e.clientY;
            // console.log ( "鼠标按下了" )
            this.onmousemove=function ( e ) {
                e=e||window.event;
                //获取滚动的X和Y轴
                //client:鼠标触发点相对于页面可视区域左上角距离
                x=e.clientX;
                y=e.clientY;
                //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
                xN=x-x_;
                yN=y-y_;
                //差值拼接到旋转的Y里面去
                roY+=xN*0.2;//水平拖影响Y轴;
                roX-=yN*0.2;
                oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
                // var oDiv =document.createElement('div');
                // this.body.appendChild(oDiv);
                // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";这三行是测试用的
                x_=e.clientX;
                y_=e.clientY;
            }
            this.onmouseup=function ( ) {
                // console.log ( "鼠标抬起了" )
                this.onmousemove= null;
                //设置一个定时器,实现后面惯性效果8
                time=setInterval(function ( ) {

                    //无限乘以零点95它会接近0的状态
                    xN*=0.95;
                    yN*=0.95;
                    //当它小到0.1时停止计时器
                    if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
                        clearInterval(time);
                    }
                    //差值拼接到旋转的Y里面去
                    roY+=xN*0.2;//水平拖影响Y轴;
                    roX-=yN*0.2;
                    oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';

                },30)
            }
        }
    }


</script>
</body>
</html>